<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    opt: any;
}>();

const { $db, $global } = props.ujt;
</script>

<template>
    <template v-if="$db[props.opt.channel].cmPageList.length > 1">
        <template
            v-for="item in $db[props.opt.channel].cmPageList"
            :key="'listpage' + (item || '')"
        >
            <slot :item="item" :opt="{}">
                <div
                    @pointerdown.stop
                    @pointerup.stop="$db[props.opt.channel]?.setpage(item)"
                    :class="
                        item == $global.location.query?.pg ||
                        (item == 1 && !$global.location.query?.pg)
                            ? 'as-channel-active'
                            : ''
                    "
                >
                    {{ item }}
                </div>
            </slot>
        </template>
    </template>
</template>

<style scoped lang="scss">
.as-channel-page {
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;

    > div {
        user-select: none;
        display: inline-block;
        cursor: pointer;
        padding: 2px 8px;
        border-radius: 8px;
    }

    > .as-channel-active {
        cursor: default;
        background-color: var(--cm8);
        color: var(--cm0);
    }
}
</style>
